<template>
  <div class="page">
    <div ref="screenRef" class="screen">
      <div class="screen-head">{{ SCREEN_TITLE }}</div>
      <div class="screen-content">
        <div class="content-top">
            <div class="title">生产订单</div>
            <content-item-top class="content"></content-item-top>
        </div>
        <div class="content-bottom">
          <div class="title">异常订单</div>
          <content-item-bottom class="content"></content-item-bottom>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, nextTick } from "vue";
import { BorderBox11 } from '@dataview/datav-vue3';
import ContentItemTop from "./ContentItemTop.vue";
import ContentItemBottom from "./ContentItemBottom.vue";
const isDevelopment = import.meta.env.DEV;

//大屏标题
const SCREEN_TITLE = "玖富隆生产大屏";

const screenRef = ref(null);

const get_screen_scale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

const initScreenContainer = () => {
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
  window.onresize = () => {
    screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
  };
};

const getDomInfo = () => {
  nextTick(() => { 
    const dom:any = document.querySelector('.screen');
    const { offsetWidth,offsetHeight } = dom;
    let width = 1920,height = 1080;
    if(isDevelopment){
      width = 1500;
      height = 800;
    }
    dom.style.width = width + 'px';
    dom.style.height = height + 'px';
  });
}

onMounted(() => {
  initScreenContainer();
});
</script>
<style lang='scss' scoped>
.page {
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -2;
}
.page .screen {
  width: 1920px;
  height: 1080px;
  position: fixed;
  background: url("/screen_bg.png") no-repeat;
  background-size: cover;
  transform-origin: left top;
  left: 50%;
  top: 50%;
  z-index: 0;
}
.screen-head {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 8px;
}
.screen-content{
    width: 100%;
    height:calc(100% - 100px);
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .content-top{
        flex:3;
        margin: 5px 0;
        .title{
          width: 100%;
          height: 40px;
          color:#0bedf5;
          font-size:30px;
          line-height: 40px;
          text-align: center;
        }
        .content{
          width:100%;
          height: calc(100% - 40px);
          height:506px;
        }
    }

    .content-bottom{
        flex:2;
        margin: 5px 0;
        .title{
          width: 100%;
          height: 40px;
          color:#0bedf5;
          font-size:30px;
          line-height: 40px;
          text-align: center;
        }
        .content{
          width:100%;
          height: calc(100% - 40px);
          height: 340px;
        }
    }
}
</style>